<template>
  <div class="login">
    <section class="login-logo"><i class="iconfont">&#xe620;</i></section>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="phone"
        label="电话号码"
        placeholder="请输入电话号码"
        :rules="[{ required: true, message: '请填写电话号码' }]"
      />
      <!-- 验证码填写区 ~~~~~~~~~~~~~~~~~~~~~~-->
      <!-- <van-field
        v-model="code"
        name="code"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      /> -->
      <van-field
    v-model="code"
    type="password"
    name="code"
    label="密码"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
      <!-- 发送验证码内容········································· -->
      <!-- <section class="login-send">
        <button class="sending" @click="QSCode" :disabled="btnDisabled" >
          {{ btnTXT }}
        </button>
      </section> -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" @click="sure"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {
// getCode,
// loginA,
} from '@/api/login'
export default {
  name: 'login',
  data() {
    return {
      phone: '',
      code: '',
      btnDisabled: false,
      setTimes: 60,
      btnTXT: '发送验证码',
      timeOut: null,
    }
  },
  methods: {
    onSubmit(values) {
      this.$store.dispatch('user/loginAction', values)
    },
    QSCode() {
      this.setTimes = 60
      const user = JSON.parse(localStorage.getItem('user')) || []
      const data = user.some((item) => {
        return item.telephone === this.phone
      })
      const phoneNumber = /^13|15|17|18|19[0-9]{8}$/
      if (!phoneNumber.test(this.phone)) {
        this.$toast({
          type: 'fail',
          message: '号码格式不正确',
        })
        return false
      } else {
        if (data) {
          this.timer()
        } else {
          this.$toast({
            type: 'fail',
            message: '该号码没注册',
          })
          return false
        }
      }
    },
    // 发送验证码定时器
    // timer() {
    //   if (this.setTimes > 0) {
    //     this.btnDisabled = true
    //     this.setTimes--
    //     this.btnTXT = `重新发送${this.setTimes}秒`
    //     this.timeOut = setTimeout(this.timer, 1000)
    //   } else {
    //     this.setTimes = 0
    //     this.btnTXT = '发送验证码'
    //     this.btnDisabled = false
    //   }
    // },
    sure() {
      clearTimeout(this.timeOut)
      // 发送验证码的内容
      // this.btnTXT = '发送验证码'
      // this.btnDisabled = false
      const user = JSON.parse(localStorage.getItem('user')) || []
      const res = user.find((item) => {
        return item.telephone === this.phone
      })
      if (res) {
        if (res.password === this.code) {
          this.$toast({
            type: 'success',
            message: '登录成功,去购物吧',
          })
          localStorage.setItem('personalCenter', JSON.stringify({ value: this.phone }))
          this.$router.push({ path: '/home' })
        }
      } else {
        this.$toast({
          type: 'fail',
          message: '账号或密码错误',
        })
        this.code = ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 3284892 */
  src: url('//at.alicdn.com/t/font_3284892_474j9qeppa3.woff2?t=1648707439233') format('woff2'),
       url('//at.alicdn.com/t/font_3284892_474j9qeppa3.woff?t=1648707439233') format('woff'),
       url('//at.alicdn.com/t/font_3284892_474j9qeppa3.ttf?t=1648707439233') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.login {
  .login-logo {
    width: 80px;
    height: 80px;
  border-radius: 50%;
    text-align: center;
    line-height: 80px;
    margin: 0 auto;
    margin-top: 30%;
    margin-bottom: 30px;
    >.iconfont{
      font-size: 80px;
      color: rgb(70, 185, 238);
    }
  }
  .login-send {
    width: 100%;
    height: 50px;
    .sending {
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      line-height: 40px;
      margin-left: 15px;
      margin-top: 15px;
      border-radius: 10px;
      padding: 0 10px;
      background-color: #ccc;
      border: none;
      display: block;
    }
  }
}
</style>
